<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <p>count 值：{{ $store.state.count }}</p>
    <p>总价：{{ $store.getters.totalPrice }}</p>
    <button @click="addOne" class="btn btn-primary">+1</button>
    <button @click="addFive" class="btn btn-primary">+11</button>
    <button @click="fn1" class="btn btn-primary">actions调用</button>
  </div>
</template>

<script>
export default {
  name: 'Left',
  methods: {
    addOne () {
      // 直接去修改state里的数据存在如下两个问题
      // 1. 会发现浏览器上的调试工具监测不到变化，不利于调试
      // 2. vuex如果开启了严格模式，会报错
      // vuex官网都说了，state是不允许直接被修改的
      // 唯一允许修改state的地方，在mutations里
      // this.$store.state.count++

      // 我要通过调用mutations的形式间接修改count
      this.$store.commit('add1')
    },

    addFive () {
      this.$store.commit('addWithNum', { num1: 5, num2:6 })
    },

    fn1 () {
      // 调用actions的方法要用dispatch
      this.$store.dispatch('updateCount')
    }
  }
}
</script>

<style>
</style>
